<template>
    <a-alert style="width: 50%; margin: 20px auto" show-icon message="确认转账后，资金将直接打入对方账户，无法退回。" closable type="info" />
    <div style="width: 35%; margin: 30px auto">
        <a-descriptions :column="1">
            <a-descriptions-item label="转账账号">{{props.formInfo.outAccount}}</a-descriptions-item>
            <a-descriptions-item label="收款账户">{{props.formInfo.inAccount}}[{{ props.formInfo.accountType }}]</a-descriptions-item>
            <a-descriptions-item label="收款人姓名">{{props.formInfo.name}}</a-descriptions-item>
            <a-descriptions-item label="转账金额"><span style="font-size: 20px; font-weight: bolder;">{{props.formInfo.price}}</span>元</a-descriptions-item>
        </a-descriptions>
        <a-divider />
        <a-form
        ref="formRef"
        :model="formState"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item name="password" label="支付密码">
          <a-input
            v-model:value="formState.password"
            placeholder="请输入付款密码"
          />
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 4, span: 16 }">
          <a-button @click="back" style="margin-right: 10px;">上一步</a-button>
          <a-button type="primary" html-type="submit" @click="onSubmit">提交</a-button>
        </a-form-item>
      </a-form>
    </div>
</template>

<script lang="ts" setup >
import {  reactive, ref, toRaw } from "vue";
import type { UnwrapRef } from "vue";
import type { Rule } from "ant-design-vue/es/form";
const labelCol = { style: { width: "100px" } };
const wrapperCol = { span: 24 };
const formRef = ref();
const props = defineProps({
    formInfo: {
        type: Object,
        default: ()=>{}
    }
})
interface FormState {
    password: string | undefined;
}
const formState: UnwrapRef<FormState> = reactive({
    password: undefined,
});
const rules: Record<string, Rule[]> = {
    password: [{ required: true, message: "请输入付款密码", trigger: "change" }],
};
const emit = defineEmits(["submitSuccess", "back"]);
const back = () => {
    emit("back")
}
const onSubmit = () => {
  return new Promise((resolve, reject) => {
    formRef.value
      .validate()
      .then(() => {
        emit("submitSuccess",{params: toRaw(formState), step: '2'});
        resolve(toRaw(formState));
      })
      .catch((error: any) => {
        reject(error);
      });
  });
};
</script>

<style scoped lang = "less">

</style>
